<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jQuery 鼠标事件示例1</title>
        <style>
            div{ width:300px; height:400px; text-align:center;
                float:left; margin:20px; border:1px solid; }
            img{ width:200px; height:auto; }    
        </style> 
        <script src="js/jquery-1.12.4.js"></script> 
        <script>    
            $(document).ready(function(){         
                 //触发按钮1的鼠标单击事件
                 $("#btn01").click(function(){
                     $("#img01").attr("src","image/bulb_light.jpg");
                 });
                 //触发按钮2的鼠标双击事件
                 $("#btn02").dblclick(function(){
                      $("#img02").attr("src","image/bulb_light.jpg");
                 });
                 //触发灯泡3的鼠标悬浮事件    
                 $("#img03").hover(function(){
                      $("#img03").attr("src","image/bulb_light.jpg");
                 }); 
            });
        </script>  
    </head>
    <body>
        <h3>jQuery 鼠标事件click()、dblclick()和hover()示例</h3>
        <hr>
        <div>
            <h4>灯泡1:click()事件测试</h4>
            <img id="img01" src="image/bulb_dark.jpg" />
            <br />
            <p><button id="btn01">单击此处开灯</button></p>    
        </div>    
        <div>
            <h4>灯泡2:dblclick()事件测试</h4>
            <img id="img02" src="image/bulb_dark.jpg" />
            <br />
            <p><button id="btn02">双击此处开灯</button></p>    
        </div>    
        <div>
            <h4>灯泡3:hover()事件测试</h4>
            <img id="img03" src="image/bulb_dark.jpg" />
            <br />
            <p>鼠标悬浮在灯泡上开灯</p>    
        </div>    
    </body>
</html>